<template>
  <div class="member-payment">
    <h2 class="payment-title">{{ title }}</h2>
    
    <div class="payment-container">
      <div class="payment-summary">
        <h3>订单摘要</h3>
        <div class="summary-item">
          <span>会员类型</span>
          <span>{{ membershipInfo.name }}</span>
        </div>
        <div class="summary-item">
          <span>价格</span>
          <span>¥{{ membershipInfo.price }}/月</span>
        </div>
        <div class="summary-item">
          <span>订阅时长</span>
          <span>{{ subscriptionMonths }}个月</span>
        </div>
        <div class="summary-item discount" v-if="discount > 0">
          <span>优惠折扣</span>
          <span>-¥{{ discount.toFixed(2) }}</span>
        </div>
        <div class="summary-item total">
          <span>应付总额</span>
          <span>¥{{ totalAmount.toFixed(2) }}</span>
        </div>
      </div>
      
      <div class="payment-form">
        <h3>支付信息</h3>
        
        <!-- 支付方式选择 -->
        <div class="form-group">
          <label>支付方式</label>
          <div class="payment-methods">
            <label class="payment-option" v-for="method in paymentMethods" :key="method.id">
              <input 
                type="radio" 
                name="paymentMethod" 
                :value="method.id" 
                v-model="selectedPaymentMethod"
              />
              <div class="payment-method-icon" v-html="method.icon"></div>
              <span>{{ method.name }}</span>
            </label>
          </div>
        </div>
        
        <!-- 订阅时长选择 -->
        <div class="form-group" v-if="showSubscriptionOptions">
          <label>订阅时长</label>
          <select v-model="subscriptionMonths" class="month-select">
            <option value="1">1个月</option>
            <option value="3">3个月 (9折优惠)</option>
            <option value="6">6个月 (8折优惠)</option>
            <option value="12">12个月 (7折优惠)</option>
          </select>
        </div>
        
        <!-- 优惠券输入 -->
        <div class="form-group">
          <label>优惠券</label>
          <div class="coupon-input-wrapper">
            <input 
              type="text" 
              v-model="couponCode" 
              placeholder="请输入优惠券代码" 
              class="coupon-input"
            />
            <button class="apply-btn" @click="applyCoupon">应用</button>
          </div>
          <p class="coupon-message" v-if="couponMessage">{{ couponMessage }}</p>
        </div>
        
        <!-- 支付按钮 -->
        <button 
          class="pay-btn" 
          @click="processPayment" 
          :disabled="!selectedPaymentMethod || processing"
        >
          {{ processing ? '处理中...' : '立即支付' }}
        </button>
        
        <!-- 支付说明 -->
        <div class="payment-notes">
          <p>点击支付即表示您同意<a href="#">《会员服务条款》</a>和<a href="#">《自动续费协议》</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { userState, updateUserInfo } from '../store.js';

const props = defineProps({
  title: {
    type: String,
    default: '会员支付'
  },
  membershipLevel: {
    type: Number,
    default: 1
  },
  price: {
    type: Number,
    default: 19.9
  },
  showSubscriptionOptions: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['paymentSuccess', 'paymentFailed']);

const selectedPaymentMethod = ref('');
const subscriptionMonths = ref(1);
const couponCode = ref('');
const couponMessage = ref('');
const processing = ref(false);
const appliedDiscount = ref(0);

// 支付方式
const paymentMethods = [
  {
    id: 'wechat',
    name: '微信支付',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.99 14.41c-1.49-1.46-1.52-3.85-.06-5.33l3.43-3.4c1.43-1.43 3.75-1.43 5.18 0 1.43 1.43 1.43 3.75 0 5.18l-3.43 3.4c-1.48 1.46-3.87 1.43-5.33-.06z" fill="#07C160"/>
    </svg>`
  },
  {
    id: 'alipay',
    name: '支付宝',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.99 14.41c-1.49-1.46-1.52-3.85-.06-5.33l3.43-3.4c1.43-1.43 3.75-1.43 5.18 0 1.43 1.43 1.43 3.75 0 5.18l-3.43 3.4c-1.48 1.46-3.87 1.43-5.33-.06z" fill="#1677FF"/>
    </svg>`
  },
  {
    id: 'creditcard',
    name: '银行卡',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill="#FF6B6B"/>
    </svg>`
  }
];

// 会员信息
const membershipInfo = computed(() => {
  const basePrice = props.price;
  let name = '黄金会员';
  
  switch(props.membershipLevel) {
    case 1:
      name = '黄金会员';
      break;
    case 2:
      name = '铂金会员';
      break;
    case 3:
      name = '钻石会员';
      break;
  }
  
  return {
    name,
    price: basePrice
  };
});

// 计算折扣
const discount = computed(() => {
  const basePrice = props.price * subscriptionMonths.value;
  let discountRate = 0;
  
  // 根据订阅时长计算折扣
  switch(Number(subscriptionMonths.value)) {
    case 3:
      discountRate = 0.1; // 9折
      break;
    case 6:
      discountRate = 0.2; // 8折
      break;
    case 12:
      discountRate = 0.3; // 7折
      break;
  }
  
  // 加上优惠券折扣
  const durationDiscount = basePrice * discountRate;
  return durationDiscount + appliedDiscount.value;
});

// 计算总额
const totalAmount = computed(() => {
  const basePrice = props.price * subscriptionMonths.value;
  return Math.max(0, basePrice - discount.value);
});

// 应用优惠券
const applyCoupon = () => {
  if (!couponCode.value.trim()) {
    couponMessage.value = '请输入优惠券代码';
    return;
  }
  
  // 模拟优惠券验证
  const validCoupons = {
    'VIP2024': 10, // 10元优惠
    'NEWMEMBER': 5, // 5元优惠
    'DISCOUNT30': props.price * 0.3 // 30%折扣
  };
  
  if (validCoupons[couponCode.value.toUpperCase()]) {
    appliedDiscount.value = validCoupons[couponCode.value.toUpperCase()];
    couponMessage.value = '优惠券应用成功！';
    setTimeout(() => {
      couponMessage.value = '';
    }, 3000);
  } else {
    couponMessage.value = '无效的优惠券代码';
    setTimeout(() => {
      couponMessage.value = '';
    }, 3000);
  }
};

// 处理支付
const processPayment = () => {
  if (!selectedPaymentMethod.value) {
    alert('请选择支付方式');
    return;
  }
  
  processing.value = true;
  
  // 模拟支付处理
  setTimeout(() => {
    // 计算到期日期
    const expiryDate = new Date();
    expiryDate.setMonth(expiryDate.getMonth() + Number(subscriptionMonths.value));
    
    // 更新用户会员状态
    const updatedInfo = {
      membershipLevel: props.membershipLevel,
      membershipExpiry: expiryDate.toISOString(),
      points: (userState.userInfo.points || 0) + 100 // 赠送100积分
    };
    
    updateUserInfo(updatedInfo);
    
    processing.value = false;
    emit('paymentSuccess', {
      membershipLevel: props.membershipLevel,
      expiryDate: expiryDate.toISOString(),
      totalAmount: totalAmount.value
    });
  }, 2000);
};
</script>

<style scoped>
.member-payment {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.payment-title {
  text-align: center;
  margin-bottom: 40px;
  color: #333;
  font-size: 28px;
}

.payment-container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.payment-summary {
  background: #f5f5f5;
  padding: 24px;
  border-radius: 12px;
  flex: 1;
  min-width: 250px;
}

.payment-summary h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.summary-item.discount {
  color: #ff5722;
}

.summary-item.total {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.payment-form {
  flex: 1;
  min-width: 250px;
}

.payment-form h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-option:hover {
  border-color: #2196f3;
  background: #f0f8ff;
}

.payment-option input[type="radio"] {
  margin: 0;
}

.payment-method-icon {
  width: 24px;
  height: 24px;
}

.month-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.coupon-input-wrapper {
  display: flex;
  gap: 10px;
}

.coupon-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}

.apply-btn {
  background: #2196f3;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.coupon-message {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #ff5722;
}

.pay-btn {
  width: 100%;
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pay-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

.pay-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.payment-notes {
  margin-top: 20px;
  font-size: 12px;
  color: #999;
  text-align: center;
}

.payment-notes a {
  color: #2196f3;
  text-decoration: none;
}

.payment-notes a:hover {
  text-decoration: underline;
}
</style>